<template>
  <div>
    <!-- 日循环 -->
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column prop="time" width="100" />
      <el-table-column>
        <template #default="scope">
          <div class="item">
            <div class="add" @click="select(scope.$index, scope.row.time)">+ 添加任务</div>
            <div
              v-for="item in scope.row.content"
              v-if="scope.row.content"
              :style="{ height: getHeight(item.startTime, item.endTime) }"
              class="content"
            >
              {{ item.startTime }}-{{ item.endTime }}&nbsp;&nbsp;{{ item.serviceName }}
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="address" label="Address" /> -->
    </el-table>
    <selectService v-if="dialogVisible" :startTime="dateTime" @close="closeHandle" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, defineProps, inject, computed } from "vue";
import { useRoute } from "vue-router";
import { AddTaskList, AddTaskParams, AddTaskResult } from "@/api/market/elderly/type";
import selectService from "@/components/market/elderly/selectService.vue";
import { addTask, getTaskList } from "@/api/market/elderly/elderly";

const route = useRoute();
//loading效果
const loading = ref(false);
//dialog显示
const dialogVisible = ref(false);

const tableData = ref<Record<string, string | AddTaskList[]>[]>([]);

const getData = async (id: number) => {
  tableData.value = [];
  let res = await getTaskList(id);
  // console.log("1111res",res.list);

  for (let row = 0; row <= 23; row++) {
    let item: Record<string, string | AddTaskList[]> = {};
    item["time"] = row + "时";
    item["content"] = res.list.filter(
      (item) =>
        item.type == "日循环" &&
        item.startTime.substring(0, 2) == (row < 10 ? "0" + row : String(row))
    );

    tableData.value.push(item);
  }
};

//高度
const getHeight = (startTime: string, endTime: string) => {
  const currentDate = new Date().toISOString().split("T")[0]; // 获取今天的日期，格式为 "YYYY-MM-DD"

  // console.log(1233,startTime);
  // 将时间字符串与日期拼接起来，形成完整的时间字符串
  const startDateTime = new Date(`${currentDate}T${startTime}`).getTime();
  const endDateTime = new Date(`${currentDate}T${endTime}`).getTime();

  // 计算时间差，单位为小时，乘以50来计算高度
  const height = ((endDateTime - startDateTime) / (60 * 60 * 1000)) * 60 + "px";

  return height;
};

//添加参数
const ruleForm = reactive<AddTaskParams>({
  elderlyId: Number(route.query.id),
  serviceId: 0,
  startTime: "",
  endTime: "",
  week: "",
  day: "",
  type: "",
});

const dateTime = ref("");
//选择任务
const select = (index: number, time: string) => {
  dialogVisible.value = true;
  //开始时间
  dateTime.value = time.slice(0, -1);
};

//添加
const add = async () => {
  loading.value = true;
  let res = await addTask(ruleForm);
  console.log("11111res", res);
  if (res.companyId) loading.value = false;
  // 刷新表格
  getData(Number(route.query.id));
};

//关闭dialog
const closeHandle = (data: any) => {
  dialogVisible.value = false;

  // console.log('11data',data);

  if (data) {
    ruleForm.serviceId = data.serviceId;
    ruleForm.startTime = data.startTime;
    ruleForm.endTime = data.endTime;
    ruleForm.type = "日循环";
    //调用添加
    add();
  }
};

onMounted(() => {
  getData(Number(route.query.id));
  // console.log("day888", taskList.value!);
});
</script>

<style scoped lang="scss">
:deep .el-table--default .el-table__cell {
  position: static !important;
  height: 60px;
  padding: 0;
}

:deep .el-table .cell {
  overflow: visible;
}

:deep .el-table__body tr.hover-row > td.el-table__cell {
  background: none;
}

.item {
  position: relative;
  height: 60px;

  &:hover {
    .add {
      display: flex;
    }
  }

  .add {
    position: absolute;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    background-color: #e4e4e4;
  }

  .content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    color: blue;
    background: #b7efff;
  }
}
</style>
